<template>
    <div class="app-container">
        <div class="manageIndex">
            <!-- <div class="m-top">
                <i class="iconfont icon-baoxianchanpin"></i><span>佣金发放</span>
            </div> -->
            <div class="unit-tabs">
              <div class="tabs1 unit-tabs-act">
                <router-link :to="{name:'manageIndex'}">手工发放</router-link>
              </div>
              <div class="tabs2">
                <router-link :to="{name:'entry2',query:{tab:'entry'}}">Excel导入发放</router-link>
              </div>
            </div>
            <div class="m-form">
                <el-form ref="formLabel" :model="formLabel" label-width="90px" :inline="true" :rules="rules" :label-position="labelPosition">
                    <el-row>
                        <el-form-item label="帐户余额：">
                            <el-input size='mini' v-model="balance" :disabled="true" class='wd300'></el-input>&nbsp;&nbsp;元
                        </el-form-item>
                    </el-row>
                    <el-row>
                        <el-form-item label="备　注：" class="is-required" prop="remark">
                            <el-input size='mini' v-model="formLabel.remark" class='wd300'></el-input><span class="color9">备注信息将发送给收款人。</span>
                        </el-form-item>
                    </el-row>
                    <el-row class="nomarg">
                        <el-form-item label="添加人员：">
                            <el-input placeholder="姓名/手机号" v-model="addPerson" size="mini" class="wd180 m-search">
                            </el-input>
                            <el-popover ref="popover1"
                                placement="bottom-end"
                                width="230"
                                v-model="isShow">
                                <!-- <div class="pop-con"  v-bind:class="{'active':chooseP == index}" @click="toChoose(item,index)" v-for='(item,index) in selectData1'  v-if='selectData1.length!=0'> -->
                                <div class="pop-con" v-bind:class="{'pop-con-last': index== selectData1.length-1}" v-for='(item,index) in selectData1'  v-if='selectData1.length!=0'>
                                <!-- <div class="pop-con"   v-for='(item,index) in aa'  v-bind:class="{'pop-con-last': index== aa.length-1}"> -->
                                    <p class="pop-p1">{{item.name}}（{{item.phoneNumber}}）</p>
                                    <p class="pop-p2">{{item.identityCard}}</p>
                                    <span class="pop-span" @click="toChoose(item,index)">添加</span>
                                </div>
                                <div  v-if='selectData1.length==0' style="text-align:center;color:#999">查无此人</div>
                                <el-button slot="reference" size='mini' @click="toSearch" style="height:28px;vertical-align:bottom;">搜索</el-button>
                            </el-popover>
                            <span class="ma14">或</span>
                            <el-button size="mini" class="wd160" @click="toDialog"><i class="iconfont icon-plus" style="line-height:15px;"></i> &nbsp;从历史发放中导入</el-button>
                        </el-form-item>
                    </el-row>
                </el-form>
            </div>
            <div class="m-table">
                <div class="table-con">
                <!-- <el-form ref="formMoney" :model="formMoney" label-width="90px" :inline="true" :rules="ruleMoney"> -->
					      <el-table :data="tableData" style="width: 100%" :stripe='true' v-loading='loading'>
						        <el-table-column type="index"  width="50">
                        </el-table-column>
                        <el-table-column label="姓名" prop="name" style="width:20%;">
                        </el-table-column>
                        <el-table-column label="手机号" prop="phoneNumber" style="width:20%;">
                        </el-table-column>
                        <el-table-column label="身份证号" prop="identityCard" style="width:20%;">
                        </el-table-column>
                        <el-table-column label="金额">
                            <template slot-scope='scope' v-if="scope.row.name">
						 		    <input placeholder="请输入金额" v-model="scope.row.money" :class="{'colorRed':isRed,'error':(scope.row.money == '' || scope.row.money == 0) && iserror}" @change="getAllmoney(scope.row.money,scope.$index)" class="inputbox"/>
                            <!-- <el-form-item class="is-required formMoney" prop="money">
                                <el-input placeholder="请输入金额" v-model="scope.row.money" size="mini" @change="getAllmoney(scope.row.money,scope.$index)" v-bind:class="{'colorRed':isRed}"></el-input>
                            </el-form-item> -->
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" align="right">
                            <template slot-scope='scope' v-if="scope.row.name">
                                <el-popover :ref="'edit'+scope.$index"
                                placement="bottom-end"
                                width="180"
                                v-model="scope.row.visible2">
                                <p>确定要删除吗？</p>
                                <div style="text-align: right; margin: 0">
                                    <el-button size="mini" type="text" @click="quitout('edit'+scope.$index)">取消</el-button>
                                    <el-button type="primary" size="mini" @click="outItem('edit'+scope.$index,scope.$index)">确定</el-button>
                                </div>
                                <span class="m-out" slot="reference">移除</span>
                                </el-popover>
						 	            </template>
                        </el-table-column>
					          </el-table>
                <!-- </el-form> -->
                    <div>
                      <el-table ref="tablerecord" :data="tablerecord" style="width: 100%;" :show-header='false' class="re-table">
                        <el-table-column>
                           <template slot-scope='scope' style="width:20%;">
                              <div class="line1">共选中： <span class="line-red"> {{selectLength}}</span> 人</div>
                           </template>
                        </el-table-column>
                        <el-table-column width="50"></el-table-column>
                        <el-table-column style="width:20%;"></el-table-column>
                        <el-table-column align="right" style="width:20%;">
                          <template slot-scope='scope'>
                            <div class="line2">
                              <p>转账总金额：</p>
                              <p>转账后剩余金额：</p>
                            </div>
                           </template>
                        </el-table-column>
                        <el-table-column>
                          <template slot-scope='scope'>
                             <div class="line2">
                              <p v-if="allMoney"  class="line-red">￥{{allMoney | numFilter}} 元</p><p v-else  class="line-red">￥ - 元</p> 
                              <p v-if="restBalance"  class="line-red">￥{{restBalance | numFilter}} 元</p><p v-else  class="line-red">￥ - 元</p> 
                             </div>
                           </template>
                        </el-table-column>
                        <el-table-column></el-table-column>
                    </el-table>
                    </div>
                    <!-- <div class="infoAll clearfix">
                        <div class="all1">
                            共选中： <span> {{selectLength}}</span> 人
                        </div>
                        <div class="all2">
                            <div class="all-1">
                                发放总金额： <span v-if="allMoney">￥{{allMoney | numFilter}}</span>
                                 <span v-else>￥ -</span> 元
                            </div>
                            <div class="all-1">
                                发放后剩余金额： <span v-if="restBalance">￥{{restBalance | numFilter}}</span> 
                                <span v-else>￥ -</span> 元
                            </div>
                        </div>
                    </div> -->
				        </div>
            </div>
            <div class="m-btnB">
                <el-button :disabled="allMoney==0||balance==0" size="small" type="primary" class="wd170" @click="sureSend">确 认 发 放</el-button>
            </div>
            <!-- dialog1 -->
            <el-dialog title="从历史发放中导入人员" :visible.sync="dialogTableVisible" class="manageIndex-dialog" :close-on-click-modal='false'>
              <span>历史批次：</span>
                 <el-select v-model="historyVal" filterable placeholder="选择历史转账批次" size="mini" class="d-select" @change="getBatchList"> 
                    <el-option class="d-option"
                    v-for="item in histories"
                    :key="item.id"
                    :label="item.remarks+'（共'+item.totalCount+'人）'"
                    :value="item.id">
                    <div class="d-div">
                        <span class="span1">{{ item.remarks}}</span>
                        <span class="span1">(共{{ item.totalCount}}人)</span>
                        <p class="p1">{{ item.creationTime | subFilter}}</p>
                    </div>
                    </el-option>
                 </el-select>
                 <el-table ref="multipleTable" :data="tableData1" tooltip-effect="light" style="width: 100%;" height="338px;"
                    @selection-change="handleSelectionChange" show-overflow-tooltip='true' class="d-table">
                     <el-table-column type="selection" width="85" label="全选">
                    </el-table-column>
                    <el-table-column property="name" label="姓名"></el-table-column>
                    <el-table-column property="phoneNumber" label="手机号" width="180"></el-table-column>
                    <el-table-column property="identityCard" label="身份证号" width="220"></el-table-column>
                </el-table>
                <div class="d-btn">
                    <el-button size="small" type="info" class="wd80" @click="dialogTableVisible=false">取　消</el-button>
                    <el-button size="small" type="primary" class="wd80" @click="selectSure">确　定</el-button>
                </div>
            </el-dialog>
            <!-- dialog2 -->
            <el-dialog title="发放确认" :visible.sync="dialogFormVisible" :close-on-click-modal='false' class="manageIndex-dialog2" width="380px" center @close='clearCon'>
                <el-form class='formD' ref="formD" :model="formD" label-width="100px" :inline="true" :rules="rulesD" :label-position="labelPosition1">
                    <el-row>
                        <el-form-item label="发放人员：" class="formD-1">
                            <span class="colorR">{{selectLength}}</span> 名
                        </el-form-item>
                    </el-row>
                    <el-row>
                        <el-form-item label="发放金额：">
                            <span class="colorR">￥{{allMoney | numFilter}}</span> 元
                            <div class="bigSpell">{{bigSpell}}</div>
                        </el-form-item>
                    </el-row>
                    <el-row>
                        <el-form-item label="支付密码：" class="is-required" prop="paypwd">
                            <el-input size='mini' type='password' v-model="formD.paypwd" class='wd210' name="paypwd" placeholder="请输入支付密码" @keyup.enter.native='mackSure'></el-input>
                        </el-form-item>
                    </el-row>
                     <el-row>
                        <el-form-item label="短信验证码：" class="is-required" prop="code">
                            <el-input size='mini' v-model="formD.code" class='wd110' placeholder="请输入验证码" name='code'></el-input>
                            <el-button @click='countDown' :disabled="!show1" size='mini'>
                                <span v-show="show1">获取验证码</span>
                                <span v-show="!show1" class="count">{{count1}} s</span>
                            </el-button>
                            <div class="colorGray">请使用手机{{phone}}获取验证码</div>
                        </el-form-item>
                    </el-row>
                    <div class="f-error" v-if='errorInfo'>{{errorInfo}}</div>
                    <div class="f-btn">
                        <el-button type="info" size="mini" @click="quitSend">取消</el-button>
                        <el-button type="primary" size="mini" @click="mackSure" :loading="btnloading">确定</el-button>
                    </div>
                </el-form>
            </el-dialog>
            <!-- dialog3 -->
            <el-dialog
              title="提示"
              :visible.sync="dialogHeader"
              width="30%"
              :close-on-click-modal='false'
              center :show-close="false">
              <div class="up-img">
                    <img src="@/assets/images/success.png"/>
              </div>
              <div class="up-text">转账成功!</div>
              <span slot="footer" class="dialog-footer">
                <el-button @click="fafang" size='small'>继续发放</el-button>
                <el-button type="primary" @click="toDetail" size='small'>查看账单</el-button>
              </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
const TIME_COUNT = 60;
import Vue from "vue";
export default {
  data() {
    var paypwd = (rule, value, callback) => {
      var regx = /^\d{6}$/;
      if (!regx.test(value)) {
        callback(new Error("请输入正确格式的支付密码"));
      } else {
        callback();
      }
    };
    // var setmoney = (rule, value, callback) => {
    //   if (parseFloat(this.allMoney) > parseFloat(this.balanceY)) {
    //     callback(new Error(" "));
    //   } else {
    //     callback();
    //   }
    // };
    return {
    	iadisab:false,
      isRed: false,
      show1: true,
      phone: "",
      timer1: null,
      btnloading: false,
      dialogHeader: false,
      selectLength: 0,
      formLabel: {
        remark: ""
      },
      formD: {
        paypwd: "",
        code: ""
      },
      // formMoney:{},
      balance: 0,
      balanceY: 0,
      allMoney: 0,
      bigSpell: "",
      restBalance: 0,
      addPerson: [],
      iserror:false,
      tablerecord:[{}],
      // aa:[{
      //   id:'1',
      //   name:'12',
      //   phoneNumber:'2393284',
      //   identityCard:'9r07458090'
      // },{
      //   id:'2',
      //   name:'znfengie',
      //   phoneNumber:'23932849089',
      //   identityCard:'9r0745809049037583'
      // },{
      //   id:'3',
      //   name:'znfengie',
      //   phoneNumber:'23932849089',
      //   identityCard:'9r0745809049037583'
      // }],
      labelPosition: "left",
      labelPosition1: "right",
      loading: false,
      chooseP: 0,
      isShow: false,
      visible2: false,
      users: [],
      tableData: [{}, {}, {}, {}, {}],
      selectData1: [],
      historyVal: "",
      histories: [],
      dialogTableVisible: false,
      dialogFormVisible: false,
      selectionData: [],
      tableData1: [],
      errorInfo: "",
      count1: "",
      rules: {
        remark: [{ required: true, message: "请输入备注", trigger: "blur" }]
      },
      // ruleMoney:{
      //   money: [{ required: true, message: " ", trigger: "blur" },{ validator: setmoney, trigger: "blur" }]
      // },
      rulesD: {
        paypwd: [
          { required: true, message: "请输入支付密码", trigger: "blur" },
          { validator: paypwd, trigger: "blur" }
        ],
        code: [{ required: true, message: "请输入验证码", trigger: "blur" }]
      }
    };
  },
  mounted() {
    this.getBalance();
    this.AdminInfo();
    this.checkPwd();
  },
  filters: {
    subFilter(val) {
      if (val) {
        return val.substr(0, 10);
      }
    },
    // 过滤器
    numFilter(val) {
      // 截取当前数据到小数点后两位
      // let realVal = Number(val).toFixed(2)
      // num.toFixed(2)获取的是字符串
      // return Number(realVal)
      if (val || val == 0) {
        val = val.toString().replace(/\$|\,/g, "");
        if (isNaN(val)) {
          val = "0";
        }
        let sign = val == (val = Math.abs(val));
        val = Math.floor(val * 100 + 0.50000000001);
        let cents = val % 100;
        val = Math.floor(val / 100).toString();
        if (cents < 10) {
          cents = "0" + cents;
        }
        for (var i = 0; i < Math.floor((val.length - (1 + i)) / 3); i++) {
          val =
            val.substring(0, val.length - (4 * i + 3)) +
            "," +
            val.substring(val.length - (4 * i + 3));
        }

        return (sign ? "" : "-") + val + "." + cents;
      }
    }
  },
  methods: {
    checkPwd() {
      let params = {};
      this.post(params, "services/app/applets/CheckEnterpriseSetPwd").then(
        res => {
          if (res.success) {
            if (res.result.hadPwd == false) {
              this.topayPwd();
            }
          }
        }
      );
    },
    topayPwd() {
      this.$confirm("您还没有设置支付密码，是否设置?", "提示", {
        confirmButtonText: "马上设置",
        cancelButtonText: "以后再说",
        type: "warning",
        closeOnClickModal: false
      })
        .then(() => {
          this.$router.push({
            name: "paysetpwd",
            query: {}
          });
        })
        .catch(() => {
          console.log("catch");
        });
    },
    //   余额
    getBalance() {
      let params = {};
      this.post(params, "services/app/applets/SubAccountBalance").then(rs => {
        if (rs.success) {
          this.balanceY = rs.result.money;
          let balanceData = this.numFilter(rs.result.money);
          this.balance = balanceData;
        }
      });
    },
    // 过滤器
    numFilter(val) {
      // 截取当前数据到小数点后两位
      // let realVal = Number(val).toFixed(2)
      // num.toFixed(2)获取的是字符串
      // return Number(realVal)
      if (val || val == 0) {
        val = val.toString().replace(/\$|\,/g, "");
        if (isNaN(val)) {
          val = "0";
        }
        let sign = val == (val = Math.abs(val));
        val = Math.floor(val * 100 + 0.50000000001);
        let cents = val % 100;
        val = Math.floor(val / 100).toString();
        if (cents < 10) {
          cents = "0" + cents;
        }
        for (var i = 0; i < Math.floor((val.length - (1 + i)) / 3); i++) {
          val =
            val.substring(0, val.length - (4 * i + 3)) +
            "," +
            val.substring(val.length - (4 * i + 3));
        }

        return (sign ? "" : "-") + val + "." + cents;
      }
    },
    // 金额
    getAllmoney(money, index) {
      this.allMoney = "0";
      this.users = [];
      let arr = [];
      this.tableData.forEach((item, indexs) => {
        //  item.money = this.api.clearNoNum(item.money);
        arr.push(item);
        // console.log(item);
        // console.log("item---------------------------------------");
        // console.log(arr[indexs].money);
        // console.log(this.api.clearNoNum(arr[indexs].money + ""));
        if (arr[indexs].money) {
          Vue.set(
            arr[indexs],
            "money",
            this.api.clearNoNum(arr[indexs].money + "")
          );
          this.allMoney =
            parseFloat(this.allMoney) + parseFloat(arr[indexs].money);
          if (item.id) {
            console.log(item.id);
            let obj = {};
            obj.userId = item.id;
            obj.money = parseFloat(item.money);
            this.users.push(obj);
          }
        }
      });
      this.tableData = arr;
      // console.log(this.tableData);
      // console.log("---------------------------------------");
      this.restBalance = this.balanceY - this.allMoney;
      if (parseFloat(this.allMoney) > parseFloat(this.balanceY)) {
        this.isRed = true;
      } else {
        this.isRed = false;
      }
      // console.log(this.users);
      // console.log("---------------22------------------------");
    },
    // 搜索
    toSearch() {
      let params = {
        nameOrPhoneNumber: this.addPerson
      };
      this.post(params, "services/app/applets/QueryUserInfo").then(rs => {
        if (rs.success) {
          console.log(rs.result);
          this.selectData1 = rs.result;
        }
      });
    },
    toDialog() {
      this.dialogTableVisible = true;
      this.historyVal = "";
      this.tableData1 = [];
      this.getBatch();
    },
    quitout(item) {
      this.$refs[item].doClose();
    },
    // 移除
    outItem(item, index) {
      if (this.tableData.length < 6) {
        this.tableData.splice(index, 1);
        this.tableData.push({});
        this.selectLength = 0;
        this.tableData.forEach(i => {
          if (JSON.stringify(i) != "{}") {
            this.selectLength++;
          }
        });
      } else {
        this.tableData.splice(index, 1);
        this.selectLength = this.tableData.length;
      }
      this.getAllmoney(item.money,index);
      this.$refs[item].doClose();
    },
    // 历史批次
    getBatch() {
      let params = {};
      this.post(params, "services/app/applets/GetTransferAccountBatch").then(
        rs => {
          if (rs.success) {
            this.histories = rs.result;
          }
        }
      );
    },
    getBatchList(val) {
      this.historyVal = val;
      if (val) {
        let params = {
          id: val
        };
        this.post(params, "services/app/applets/GetUsersByBatchId").then(rs => {
          if (rs.success) {
            this.tableData1 = rs.result;
          }
        });
      }
    },
    // 多选
    handleSelectionChange(val) {
      console.log(val);
      val.forEach(item => {
        item.money = "";
        item.visible2 = false;
      });
      this.selectionData = val;
    },
    //   确定发放
    sureSend() {
      this.$refs["formLabel"].validate(valid => {
        if (valid) {
                // alert('submit!');
          if (this.selectLength == 0) {
            this.$notify.warning({
              title: "提示",
              message: "请添加人员"
            });
          } else if (!this.isRed) {
            console.log(this.tableData);
            let ok = 0;
            this.tableData.forEach(i => {
              if(((i.money+'') == '' || i.money == 0) && i.id){
                ok = 1;
                //  this.$confirm('请填写金额', '提示', {
                //   confirmButtonText: '确定',
                //   cancelButtonText: '取消',
                //   type: 'warning'
                // })
                this.iserror = true;
              }
            })
            console.log(ok);
            if(ok == 0){
              console.log(this.allMoney);
              this.errorInfo = '';
              this.formD.code = '';
              this.formD.paypwd = '';
              this.dialogFormVisible = true;
              this.bigSpell = this.AmountInWords(this.allMoney);
            }
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    AdminInfo() {
      let params = {};
      this.post(params, "services/app/applets/AdminInfo").then(rs => {
        if (rs.success) {
          this.phone = rs.result.smsPhoneNumber;
        }
      });
    },
    // 倒计时
    countDown() {
      console.log(this.show1);
      if (!this.timer1) {
        this.count1 = TIME_COUNT;
        this.show1 = false;
        // this.$message.success('验证码已发送，请注意查收');
        this.getnumber();
        this.timer1 = setInterval(() => {
          if (this.count1 > 0 && this.count1 <= TIME_COUNT) {
            this.count1--;
          } else {
            this.show1 = true;
            clearInterval(this.timer1);
            this.timer1 = null;
          }
        }, 1000);
      }
    },
    //第一个验证码发送
    getnumber() {
      let params = {};
      this.post(params, "services/app/applets/SendSMSCodePC").then(rs => {
        if (rs.success) {
          this.securitycode = rs.result.securityCode;
          this.$message.success("验证码已发送，请注意查收");
        } else {
          this.timer1 = clearInterval(this.timer1);
          // this.count1 = TIME_COUNT;
          this.errorInfo = rs.error.message;
          this.show1 = true;
        }
      });
    },
    // 人的选择
    toChoose(item, index) {
      const _this = this;
      // this.chooseP = index;
      this.isShow = false;
      let a = 0;
      this.tableData.forEach(i => {
        if (i.id == item.id) {
          this.$message({
            message: '用户重复添加',
            type: 'warning'
          });
          a = 1;
        }
      });
      if (a != 1) {
        item.money = "";
        item.visible2 = false;
        if (
          this.tableData.length >= 5 &&
          JSON.stringify(this.tableData[4]) != "{}"
        ) {
          this.tableData.push(item);
          this.selectLength = this.tableData.length;
        } else {
          for (let i = 0; i < this.tableData.length; i++) {
            if (JSON.stringify(this.tableData[i]) == "{}") {
              console.log(i);
              // this.tableData[i] = item;
              Vue.set(this.tableData, i, item);
              _this.selectLength = i + 1;
              break;
            }
          }
        }
        this.addPerson = '';
        this.selectData1 = [];
      }
    },
    // table弹框
    selectSure() {
      this.dialogTableVisible = false;
      let noTwo = [];
      this.tableData.forEach(i => {
        for (let j = 0; j < this.selectionData.length; j++) {
          if (i.id == this.selectionData[j].id) {
            this.$message({
              message: '用户重复添加',
              type: 'warning'
            });
            this.selectionData.splice(j, 1);
          }
        }
      });

      if (JSON.stringify(this.tableData[4]) != "{}") {
        this.tableData = this.tableData.concat(this.selectionData);
        this.selectLength = this.tableData.length;
      } else {
        let a = 0;
        // console.log(this.tableData);
        for (let i = 0; i < this.tableData.length; i++) {
          if (JSON.stringify(this.tableData[i]) == "{}") {
            if (a < this.selectionData.length) {
              Vue.set(this.tableData, i, this.selectionData[a]);
              this.selectLength = i + 1;
              if (i == 4) {
                let b = this.selectionData.splice(
                  a + 1,
                  this.selectionData.length - a
                );
                // console.log(b);
                this.tableData = this.tableData.concat(b);
                this.selectLength = this.tableData.length;
              }
            }
            a++;
          }
        }
      }
      console.log(this.selectionData);
      console.log(this.tableData);
    },
    // 关闭
    clearCon(){
      this.$refs["formD"].resetFields();
    },
    quitSend() {
      this.dialogFormVisible = false;
      this.$refs["formD"].resetFields();
    },
    // 确定按钮
    mackSure() {
      this.$refs["formD"].validate(valid => {
        if (valid) {
          this.btnloading = true;
          let params = {
            remark: this.formLabel.remark,
            payPassword: this.formD.paypwd,
            code: this.formD.code,
            securityCode: this.securitycode,
            count: this.selectLength,
            users: this.users
          };
          this.post(params, "services/app/applets/TransferAccountPC_new").then(
            rs => {
              if (rs.success) {
                this.btnloading = false;
                if (rs.result.code == 1) {
                  this.dialogFormVisible = false;
                  this.dialogHeader = true;
                  //   this.$notify({
                  //     title: "成功",
                  //     message: "发放成功",
                  //     type: "success"
                  //   });
                  //   this.formLabel.remark = "";
                  //   this.tableData = [];
                  //   this.addPerson = "";
                  //   this.allMoney = "";
                  //   this.restBalance = "";
                  //   this.$refs["formD"].resetFields();
                }
              } else {
                this.btnloading = false;
                this.errorInfo = rs.error.message;
              }
            }
          );
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    fafang() {
      this.$router.push({
        name: "paytransferMenu"
      });
      this.$router.go(0);
    },
    toDetail() {
      this.$router.push({
        name: "putout"
      });
    },
    // 大写
    // smalltoBIG(n){    
    //   var fraction = ['角', '分'];    
    //   var digit = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'];    
    //   var unit = [ ['元', '万', '亿'], ['', '拾', '佰', '仟']  ];    
    //   var head = n < 0? '欠': '';    
    //   n = Math.abs(n);    
    
    //   var s = '';    
    
    //   for (var i = 0; i < fraction.length; i++)     
    //   {    
    //       s += (digit[Math.floor(n * 10 * Math.pow(10, i)) % 10] + fraction[i]).replace(/零./, '');    
    //   }    
    //   s = s || '整';    
    //   n = Math.floor(n);    
    
    //   for (var i = 0; i < unit[0].length && n > 0; i++)     
    //   {    
    //       var p = '';    
    //       for (var j = 0; j < unit[1].length && n > 0; j++)     
    //       {    
    //           p = digit[n % 10] + unit[1][j] + p;    
    //           n = Math.floor(n / 10);    
    //       }    
    //       s = p.replace(/(零.)*零$/, '').replace(/^$/, '零')  + unit[0][i] + s;    
    //   }    
    //   return head + s.replace(/(零.)*零元/, '元').replace(/(零.)+/g, '零').replace(/^整$/, '零元整');    
    // },
    AmountInWords(dValue, maxDec){
      // 验证输入金额数值或数值字符串：
      dValue = dValue.toString().replace(/,/g, ""); dValue = dValue.replace(/^0+/, ""); // 金额数值转字符、移除逗号、移除前导零
      if (dValue == "") { return "零元整"; } // （错误：金额为空！）
      else if (isNaN(dValue)) { return "错误：金额不是合法的数值！"; } 
      
      var minus = ""; // 负数的符号“-”的大写：“负”字。可自定义字符，如“（负）”。
      var CN_SYMBOL = ""; // 币种名称（如“人民币”，默认空）
      if (dValue.length > 1)
      {
      if (dValue.indexOf('-') == 0) { dValue = dValue.replace("-", ""); minus = "负"; } // 处理负数符号“-”
      if (dValue.indexOf('+') == 0) { dValue = dValue.replace("+", ""); } // 处理前导正数符号“+”（无实际意义）
      }
      
      // 变量定义：
      var vInt = ""; var vDec = ""; // 字符串：金额的整数部分、小数部分
      var resAIW; // 字符串：要输出的结果
      var parts; // 数组（整数部分.小数部分），length=1时则仅为整数。
      var digits, radices, bigRadices, decimals; // 数组：数字（0~9——零~玖）；基（十进制记数系统中每个数字位的基是10——拾,佰,仟）；大基（万,亿,兆,京,垓,杼,穰,沟,涧,正）；辅币（元以下，角/分/厘/毫/丝）。
      var zeroCount; // 零计数
      var i, p, d; // 循环因子；前一位数字；当前位数字。
      var quotient, modulus; // 整数部分计算用：商数、模数。

      // 金额数值转换为字符，分割整数部分和小数部分：整数、小数分开来搞（小数部分有可能四舍五入后对整数部分有进位）。
      var NoneDecLen = (typeof(maxDec) == "undefined" || maxDec == null || Number(maxDec) < 0 || Number(maxDec) > 5); // 是否未指定有效小数位（true/false）
      parts = dValue.split('.'); // 数组赋值：（整数部分.小数部分），Array的length=1则仅为整数。
      if (parts.length > 1) 
      {
      vInt = parts[0]; vDec = parts[1]; // 变量赋值：金额的整数部分、小数部分
      
      if(NoneDecLen) { maxDec = vDec.length > 5 ? 5 : vDec.length; } // 未指定有效小数位参数值时，自动取实际小数位长但不超5。
      var rDec = Number("0." + vDec);  
      rDec *= Math.pow(10, maxDec); rDec = Math.round(Math.abs(rDec)); rDec /= Math.pow(10, maxDec); // 小数四舍五入
      var aIntDec = rDec.toString().split('.');
      if(Number(aIntDec[0]) == 1) { vInt = (Number(vInt) + 1).toString(); } // 小数部分四舍五入后有可能向整数部分的个位进位（值1）
      if(aIntDec.length > 1) { vDec = aIntDec[1]; } else { vDec = ""; }
      }
      else { vInt = dValue; vDec = ""; if(NoneDecLen) { maxDec = 0; } } 
      if(vInt.length > 44) { return "错误：金额值太大了！整数位长【" + vInt.length.toString() + "】超过了上限——44位/千正/10^43（注：1正=1万涧=1亿亿亿亿亿，10^40）！"; }
      
      // 准备各字符数组 Prepare the characters corresponding to the digits:
      digits = new Array("零", "壹", "贰", "叁", "肆", "伍", "陆", "柒", "捌", "玖"); // 零~玖
      radices = new Array("", "拾", "佰", "仟"); // 拾,佰,仟
      bigRadices = new Array("", "万", "亿", "兆", "京", "垓", "杼", "穰" ,"沟", "涧", "正"); // 万,亿,兆,京,垓,杼,穰,沟,涧,正
      decimals = new Array("角", "分", "厘", "毫", "丝"); // 角/分/厘/毫/丝
      
      resAIW = ""; // 开始处理
      
      // 处理整数部分（如果有）
      if (Number(vInt) > 0) 
      {
      zeroCount = 0;
      for (i = 0; i < vInt.length; i++) 
      {
      p = vInt.length - i - 1; d = vInt.substr(i, 1); quotient = p / 4; modulus = p % 4;
      if (d == "0") { zeroCount++; }
      else 
      {
      if (zeroCount > 0) { resAIW += digits[0]; }
      zeroCount = 0; resAIW += digits[Number(d)] + radices[modulus];
      }
      if (modulus == 0 && zeroCount < 4) { resAIW += bigRadices[quotient]; }
      }
      resAIW += "元";
      }
      
      // 处理小数部分（如果有）
      for (i = 0; i < vDec.length; i++) { d = vDec.substr(i, 1); if (d != "0") { resAIW += digits[Number(d)] + decimals[i]; } }
      
      // 处理结果
      if (resAIW == "") { resAIW = "零" + "元"; } // 零元
      if (vDec == "") { resAIW += "整"; } // ...元整
      resAIW = CN_SYMBOL + minus + resAIW; // 人民币/负......元角分/整
      return resAIW;
    
    }
  }
};
</script>

<style lang="scss" scoped>
.colorRed {
  border: 1px solid #f56c6c !important;
}
.up-img {
  text-align: center;
  margin-top: 10px;
  img {
    width: 60px;
    height: 60px;
  }
}
.up-text {
  color: #333;
  font-size: 24px;
  text-align: center;
  margin-top: 8px;
  margin-bottom: 8px;
}
.inputbox {
  height: 28px;
  outline: none;
  border-radius: 5px;
  padding: 0 6px;
  border: 1px solid #dbdbdb;
}
.formD {
  font-size: 13px;
  color: #666666;
  .colorR {
    font-size: 14px;
    color: #cf1322;
    font-weight: 600;
  }
  .bigSpell {
    font-size: 12px;
    color: #666666;
    line-height: 18px;
  }
  .f-error {
    font-size: 13px;
    color: #cf1322;
    text-align: center;
    margin-bottom: 4px;
  }
  .f-btn {
    text-align: right;
  }
}
.wd210 {
  width: 210px;
}
.wd110 {
  width: 110px;
}
.colorGray {
  font-size: 12px;
  color: #999999;
  line-height: 17px;
  margin-top:5px;
}
.pop-con {
  height: 56px;
  padding: 9px 0 9px 0;
  width: 206px;
  border-bottom: 1px solid #e8e8e8;
  position: relative;
  cursor: pointer;
  .pop-p1 {
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 13px;
    color: #333333;
  }
  .pop-p2 {
    margin: 0;
    font-size: 12px;
    color: #666666;
  }
  .pop-span {
    font-size: 12px;
    color: #027dca;
    position: absolute;
    right: 1px;
    bottom: 50%;
    margin-bottom: -8px;
  }
}
.pop-con:first-child {
  padding: 2px 0 7px 0;
  height: 48px;
  .pop-span {
    bottom: 50%;
    margin-bottom: -4px;
  }
}
.pop-con-last {
  height: 48px;
  padding: 9px 0 0 0;
  border-bottom: 0;
  .pop-span {
    bottom: 50%;
    margin-bottom: -12px;
  }
}
// .pop-con:last-child {
//   padding: 9px 0 0 0;
//   border-bottom: 1px solid red;
// }
// .active {
//   background: #f5f7fa;
//   .pop-p1 {
//     margin: 0;
//     font-size: 13px;
//     color: #0064ff;
//   }
// }
.d-select {
  margin-bottom: 20px;
}
.d-option {
  height: 48px;
  width: 220px;
  margin: 4px 0;
  .d-div {
    padding: 3px 0;
    .span1 {
      font-size: 13px;
      // color: #333333;
      line-height: 14px;
      height: 14px;
      // font-weight: 500;
    }
    .p1 {
      font-size: 12px;
      margin: 0;
      height: 13px;
      line-height: 10px;
      color: #666666;
    }
  }
}
.d-table {
  max-height: 338px;
  overflow-y: auto;
  min-height: 194px;
}
.d-btn {
  text-align: center;
  margin-top: 30px;
}
.wd80 {
  width: 80px;
}

.app-container {
  .manageIndex {
    .m-top {
      width: 100%;
      height: 60px;
      text-align: center;
      font-size: 18px;
      color: #333333;
      line-height: 60px;
      border-bottom: 1px solid #ff7819;
      position: relative;
      i {
        margin-right: 10px;
        color: #ee6000;
      }
    }
    .m-form {
      padding: 30px 22px 20px;
      color: #666;
      font-size: 13px;
      .wd300 {
        width: 300px;
      }
      .color9 {
        font-size: 12px;
        color: #999999;
        margin-left: 10px;
      }
      .wd180 {
        width: 180px;
      }
      .ma14 {
        margin: 0 14px;
      }
      .wd160 {
        width: 160px;
        height: 28px;
        vertical-align: bottom;
      }
      .nomarg {
        height: 28px;
      }
    }
    .m-table {
      .table-con {
        padding: 0 22px;
        .cell .m-out {
          font-size: 13px;
          color: #cf1322;
          cursor: pointer;
        }
        .infoAll {
          border-top: 1px solid #d9d9d9;
          border-bottom: 1px solid #d9d9d9;
          height: 72px;
          width: 100%;
          .all1 {
            line-height: 70px;
            font-size: 14px;
            float: left;
            color: #333333;
            margin-left: 10px;
            span {
              font-size: 14px;
              color: #cf1322;
              font-weight: 600;
            }
          }
          .all2 {
            float: left;
            margin-left: 48%;
            font-size: 14px;
            color: #333333;
            text-align: right;
            .all-1 {
              margin: 12px 0 5px;
              span {
                font-size: 14px;
                color: #cf1322;
                font-weight: 600;
              }
            }
            .all-2 {
              margin: 5px 0 12px;
              span {
                font-size: 14px;
                color: #cf1322;
                font-weight: 600;
              }
            }
          }
        }
      }
    }
    .m-btnB {
      text-align: center;
      margin-top: 40px;
      margin-bottom: 30px;
      .wd170 {
        width: 170px;
      }
    }
  }
}
.error{
  border:1px solid #eb3d44
}
input::-webkit-input-placeholder{
  color:#cbcbcb;
}
.line1{
    font-size: 14px;
    color: #333333;
}
.line-red{
  font-size: 14px;
  color: #cf1322;
  font-weight: 600;
}
.line2{
  font-size: 14px;
  color: #333333;
  p{
    margin:0;
  }
}
 .unit-tabs {
    width: 100%;
    border-bottom: 1px solid #d7d7d7;
    padding: 0 0;
    .tabs1 {
      line-height: 50px;
      width: 150px;
      display: inline-block;
      font-size: 16px;
      margin-top: 9px;
      text-align: center;
      margin-left: 20px;
      font-weight: 500;
      cursor: pointer;
      margin-bottom: -1px;
    }
    .tabs2 {
      line-height: 50px;
      width: 150px;
      display: inline-block;
      font-size: 16px;
      text-align: center;
      margin-left: 20px;
      font-weight: 500;
      cursor: pointer;
      margin-bottom: -1px;
    }

    .unit-tabs-act {
      color: #ff8819;
      background: url(../../../assets/images/bomactive2x.png) center 41px no-repeat;
    }
  }
</style>
